<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据处理工作流编辑器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 顶部工具栏 -->
        <div class="toolbar">
            <div class="toolbar-left">
                <img src="logo.png" alt="Logo" class="toolbar-logo">
                <h1>数据处理工作流编辑器</h1>
            </div>
            <div class="toolbar-buttons">
                <button id="theme-toggle" class="btn btn-theme" title="切换主题">
                    <span class="theme-icon">🌙</span>
                </button>
                <button id="run-workflow" class="btn btn-primary">运行工作流</button>
                <button id="clear-workflow" class="btn btn-secondary">清空画布</button>
                <button id="save-workflow" class="btn btn-secondary">保存工作流</button>
                <button id="load-workflow" class="btn btn-secondary">加载工作流</button>
            </div>
        </div>

        <div class="main-content">
            <!-- 左侧算子选取栏 -->
            <div class="operator-panel" style="min-width:220px;max-width:none;">
                <h3>算子库</h3>
                <div class="operator-category">
                    <h4>输入输出</h4>
                    <div class="operator-list">
                        <div class="operator-item" data-type="input" draggable="true">
                            <div class="operator-icon">📥</div>
                            <span>输入节点</span>
                        </div>
                        <div class="operator-item" data-type="output" draggable="true">
                            <div class="operator-icon">📤</div>
                            <span>输出节点</span>
                        </div>
                    </div>
                </div>
                
                <div class="operator-category">
                    <h4>数据处理</h4>
                    <div class="operator-list">
                        <div class="operator-item" data-type="character-cleaner" draggable="true">
                            <div class="operator-icon">🔤</div>
                            <span>字符清洗</span>
                        </div>
                        <div class="operator-item" data-type="sentence-cleaner" draggable="true">
                            <div class="operator-icon">📝</div>
                            <span>句子筛选</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 可拖拽分隔条：左（算子库-画布） -->
            <div class="panel-resizer" data-resizer="left" title="拖动调整左侧面板宽度" style="width:6px;cursor:col-resize;border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);"></div>

            <!-- 中间工作流绘制区 -->
            <div class="workflow-canvas">
                <div class="canvas-header">
                    <h3>工作流画布</h3>
                </div>
                <div id="workflow-canvas" class="canvas">
                    <!-- 数据流动特效层 -->
                    <div class="data-flow-layer">
                        <!-- 数据流动粒子将在这里动态生成 -->
                    </div>
                    <!-- 工作流节点和连线将在这里动态生成 -->
                    <svg id="connections-svg" class="connections-layer">
                        <!-- 连线将在这里绘制 -->
                    </svg>
                    <div class="drop-hint">
                        拖拽算子到此处构建工作流
                    </div>
                </div>
                <div class="preset-workflows">
                    <div class="preset-header">
                        <h3>预置工作流</h3>
                    </div>
                    <div class="preset-list">
                        <div class="preset-item" data-doc-key="basic_format_filter" data-operator-type="preset_workflows" title="基本格式过滤">
                            <div class="preset-icon">⚙️</div>
                            <div class="preset-content">
                                <div class="preset-title">基本格式过滤</div>
                                <div class="preset-desc">去除不可见字符、Unicode标准化、HTML/Markdown清理</div>
                            </div>
                        </div>
                        <div class="preset-item" data-doc-key="basic_format_filter_masking" data-operator-type="preset_workflows" title="基本格式过滤+打码过滤">
                            <div class="preset-icon">🛡️</div>
                            <div class="preset-content">
                                <div class="preset-title">基本格式过滤+打码过滤</div>
                                <div class="preset-desc">在基本过滤基础上，附加个人信息、银行卡、IP/凭证打码</div>
                            </div>
                        </div>
                        <div class="preset-item" data-doc-key="basic_format_filter_masking_dedup" data-operator-type="preset_workflows" title="基本格式过滤+打码过滤+去重">
                            <div class="preset-icon">🧹</div>
                            <div class="preset-content">
                                <div class="preset-title">格式过滤+打码+句子去重</div>
                                <div class="preset-desc">在前两者基础上，附加MD5去重与长度过滤</div>
                            </div>
                        </div>
                        <!-- 新增预置 -->
                        <div class="preset-item" data-doc-key="advanced_sentence_quality" data-operator-type="preset_workflows" title="句子质量优化">
                            <div class="preset-icon">📏</div>
                            <div class="preset-content">
                                <div class="preset-title">句子质量优化</div>
                                <div class="preset-desc">长度过滤+MD5去重，快速提升语料质量</div>
                            </div>
                        </div>
                        <div class="preset-item" data-doc-key="secure_formatting_pipeline" data-operator-type="preset_workflows" title="安全格式化流水线">
                            <div class="preset-icon">🔒</div>
                            <div class="preset-content">
                                <div class="preset-title">安全格式化流水线</div>
                                <div class="preset-desc">格式清理+标点标准化+全面打码，适合对外发布</div>
                            </div>
                        </div>
                        <div class="preset-item" data-doc-key="nlp_ready_preprocess" data-operator-type="preset_workflows" title="NLP训练前预处理">
                            <div class="preset-icon">🧠</div>
                            <div class="preset-content">
                                <div class="preset-title">NLP训练前预处理</div>
                                <div class="preset-desc">繁简转换+Unicode标准化+去Markdown/HTML+去重</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 可拖拽分隔条：右（画布-参数区） -->
            <div class="panel-resizer" data-resizer="right" title="拖动调整右侧面板宽度" style="width:6px;cursor:col-resize;border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);"></div>

            <!-- 右侧参数设置栏 -->
            <div class="parameter-panel" style="min-width:240px;max-width:none;">
                <h3>参数设置</h3>
                <div id="parameter-content">
                    <div class="no-selection">
                        请选择一个算子节点来配置参数
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部状态栏 -->
        <div class="status-bar">
            <div class="status-info">
                <span id="node-count">节点: 0</span>
                <span id="connection-count">连接: 0</span>
                <span id="workflow-status">状态: 就绪</span>
            </div>
            <div class="log-toggle">
                <button id="toggle-log" class="btn btn-small">显示日志</button>
            </div>
        </div>

        <!-- 日志面板 -->
        <div id="log-panel" class="log-panel hidden">
            <div class="log-header">
                <h4>执行日志</h4>
                <button id="clear-log" class="btn btn-small">清空</button>
            </div>
            <div id="log-content" class="log-content">
                <div class="log-entry">工作流编辑器已启动</div>
            </div>
        </div>
    </div>

    <!-- 上下文菜单 -->
    <div id="context-menu" class="context-menu hidden">
        <div class="menu-item" data-action="delete">删除节点</div>
        <div class="menu-item" data-action="copy">复制节点</div>
        <div class="menu-item" data-action="edit">编辑参数</div>
    </div>

    <!-- 文件选择对话框模态 -->
    <div id="file-modal" class="modal hidden">
        <div class="modal-content">
            <div class="modal-header">
                <h4 id="modal-title">选择文件</h4>
                <button class="modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <input type="file" id="file-input" accept=".json" multiple>
                <div class="file-info">
                    <p>支持的文件格式：JSON</p>
                    <p>请选择包含数据的文件</p>
                </div>
            </div>
            <div class="modal-footer">
                <button id="confirm-file" class="btn btn-primary">确认</button>
                <button id="cancel-file" class="btn btn-secondary">取消</button>
            </div>
        </div>
    </div>

    <!-- 文档浮窗组件 -->
    <div id="doc-tooltip" class="doc-tooltip hidden">
        <div class="doc-tooltip-header">
            <h3 id="doc-title"></h3>
        </div>
        <div class="doc-tooltip-content">
            <p id="doc-description"></p>
            <div id="doc-details"></div>
            <div id="doc-example" class="doc-example"></div>
        </div>
    </div>

    <script src="docs.js"></script>
    <script src="script.js"></script>
</body>
</html>